

<template>

<div>

    <canvas :id="canvasDIV"></canvas> <br>

    <button @click="prev">prev</button>
    <button @click="next">next</button>
    <input type="text" v-model="state.pgNo" @change="loadPage">

</div>

</template>

<script>

import Vue from 'vue';

export default {
  data() {
    return {
      state: this.pstate,
      canvasDIV:this.canvasDIV?this.canvasDIV:"theDivOfPdfContainer"
    }
  },
  props:['pstate'],
  mounted() {
    let vm = this;
    vm.$nextTick(function() {
    if(!PDFJS) {
      console.log("PDFJS not exists!\n");
      return;
    }

    PDFJS.workerSrc = vm.state.workerpath;
    // Asynchronous download of PDF
    var loadingTask = PDFJS.getDocument(vm.state.url);
    loadingTask.promise.then(function(pdf) {

      vm.state.pdf = pdf;
      vm.state.pgNo = 1;

      vm.loadPage();

    }, function(reason) {
        console.error(reason);
      });
    })
  },
  methods: {
    prev(e) {
      this.state.pgNo--;
      this.loadPage();
    },
    next(e) {
      this.state.pgNo++;
      this.loadPage();
    },
    loadPage() {
      let vm = this;
      if(typeof vm.state.pgNo != 'number'){
        vm.state.pgNo = parseInt(vm.state.pgNo,10);

      }


      vm.state.pdf.getPage(vm.state.pgNo).then(function(page) {
        //console.log('Page loaded');
        let viewport = page.getViewport(vm.state.scale);

        // Prepare canvas using PDF page dimensions
        let canvas = document.getElementById(vm.canvasDIV),
          context = canvas.getContext('2d');
        canvas.height = viewport.height;
        canvas.width = viewport.width;

        // Render PDF page into canvas context
        var renderContext = {
          canvasContext: context,
          viewport: viewport
        };
        var renderTask = page.render(renderContext);
        // after render
        renderTask.then(function() {

        });
    });
    }
  }

}

</script>
